<template>
  <div :id="eId"></div>
</template>

<script>
  export default {
    name: "echartComponent",

    props: ['id', 'option'],

    watch:{
      option: function () {
        this.eOption = this.option;
        this.initEChart();
      },
    },

    data: function () {
      return {
        msg: '极坐标系下的堆叠线状图组件',
        eId: this.id,
        eOption : this.option
      }
    },
    methods:{
      initEChart: function () {
        try {
          var myChart = this.$echarts.init(document.getElementById(this.eId));
          myChart.setOption(this.eOption);
        } catch (e) {
          console.log("The option is error");
        }
      }
    },
    mounted: function(){
      this.initEChart();
    }


  }
</script>

<style scoped>

</style>
